import React, { memo, useEffect, useState, useRef } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { myUserVipAction } from "../store/actionTypes";
import { MemberWrap } from "./style";
import { priceMD, hjtq, hyfaq, musicMD } from "@/services/local-data";
import {
  Input,
  Col,
  Row,
  Select,
  InputNumber,
  DatePicker,
  AutoComplete,
  Cascader,
} from "antd";

const { Option } = Select;

export default memo(function Members() {
  const [month, setMonth] = useState();
  const [check, setCheck] = useState(false);
  const [scrollT, setScrollT] = useState(false);
  const [pay, setPay] = useState(true);
  const [money, setMoney] = useState("158");
  const faqtcRef = useRef();

  // const dispatch = useDispatch()
  // useEffect(() => {
  //     dispatch(myUserVipAction())
  // }, [dispatch])
  // const {vipInfos} = useSelector(state => ({
  //     vipInfos : state.getIn(['my','vipInf'])
  // }),shallowEqual)

  const userInfo = JSON.parse(window.localStorage.getItem("userInfo"));

  const priceC = (month, rmb) => {
    setMonth(month);
    setMoney(rmb);
  };

  const checkIup = () => {
    setCheck(!check);
  };

  const faq = (e) => {
    setScrollT(true);
    e.preventDefault();
    const scrolltopTemp =
      document.documentElement.scrollTop || document.body.scrollTop;
    const faqY = scrolltopTemp + e.screenY / 2 - 123;
    faqtcRef.current.style.display = "block";
    faqtcRef.current.style.top = faqY + "px";
  };

  const closeFaQ = () => {
    faqtcRef.current.style.display = "none";
  };

  return (
    <MemberWrap>
      <div className="userInfo">
        <span className="checkdq">
          <a href="">本月已下载的付费歌曲&gt;</a>
          <a href="">我购买的单曲&gt;</a>
        </span>
        <div className="userHead">
          <div className="userImg">
            <img src={userInfo.data.profile.avatarUrl} alt="" />
          </div>
          <div className="userRight">
            <p className="userName">{userInfo.data.profile.nickname}</p>
            <p>黑胶VIP有效期至：2021-12-05</p>
            <div className="userBuy">
              <div className="buyButton">
                <span>买会员赠好友</span>
              </div>
              <div className="buyButton">
                <span>使用兑换码</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="userPay">
        <div className="taps">
          <ul>
            <li>
              <span onClick={() => setPay(true)} className={pay ? "chec" : ""}>
                黑胶VIP
              </span>
              <i></i>
            </li>
            <li>
              <span onClick={() => setPay(false)} className={pay ? "" : "chec"}>
                音乐包
              </span>
              <i></i>
            </li>
          </ul>
        </div>
      </div>
      {pay ? (
        <div className="price">
          {priceMD.map((item, index) => {
            const m = item.month;
            return (
              <div
                key={item.month}
                onClick={() => priceC(item.month, item.priceNow)}
                className={month !== m ? "priceBox" : "priceBox active"}
              >
                <div className="month">{item.month}个月</div>
                <div className="priceNow">
                  <span>￥</span>
                  {item.priceNow}
                </div>
                <div className="priceOld">原价￥{item.priceOld}</div>
              </div>
            );
          })}
        </div>
      ) : (
        <div className="musicPrice">
          {musicMD.map((item, index) => {
            const m = item.month;
            return (
              <div
                onClick={() => priceC(item.month, item.priceNow)}
                className={month !== m ? "priceBox" : "priceBox active"}
                key={item.priceNow}
              >
                <div className="month">{item.month}个月</div>
                <div className="priceNow">
                  <span>￥</span>
                  {item.priceNow}
                </div>
                <div className="priceOld">
                  折合￥{(item.priceNow / item.month).toFixed(2)}
                </div>
              </div>
            );
          })}
        </div>
      )}

      <div className="productDesc">
        <span>{month === 12 ? "选择连续包年商品可节省20.00元" : ""}</span>
      </div>
      <div className="checkPicket">
        <span>选择优惠券</span>
        <span onClick={checkIup} className="checkP">
          兑换优惠券
        </span>
      </div>
      <div className="selectP">
        {!check ? (
          <Input.Group compact>
            <Select
              defaultValue="该活动价不支持使用优惠券"
              style={{ width: "30%" }}
            >
              <Option value="无可用优惠券">无可用优惠券</Option>
            </Select>
          </Input.Group>
        ) : (
          <div className="coupun">
            <input type="text" placeholder="请输入优惠券兑换码" />
            <button>兑换</button>
          </div>
        )}
      </div>
      <div className="payforWay">
        <p>支付方式</p>
        <div className="payWayBox">
          <i className="code"></i>
          <div className="payR">
            <p>使用支付宝、微信扫码支付</p>
            <div className="picIcon">
              <i className="zfb"></i>
              <i className="wx"></i>
            </div>
            <div className="money">
              <p>
                {money}
                <span>元</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div className="otherTq">
        <p className="title">黑胶VIP特权</p>
        <ul>
          {hjtq.map((item, index) => {
            return (
              <li key={item.img}>
                <img src={item.img} alt={item.title} />
                <p>{item.title}</p>
              </li>
            );
          })}
        </ul>
      </div>
      {/* <div className="special">
                <h2>VIP专享下载曲库</h2>
                <h3>畅享2518万首VIP下载歌曲</h3>
                <a href="#">查看全部&gt;</a>
            </div> */}
      <div className="faq">
        <a href="https://music.163.com/prime/vip-contract">黑胶VIP服务协议</a>
        <a href="https://music.163.com/prime/package-contract">
          音乐包服务协议
        </a>
        <a href="https://music.163.com/html/web2/vipAndroidAutopay.html">
          自动续费服务协议
        </a>
        <span onClick={(e) => faq(e)} href="#">
          常见问题解答
        </span>
      </div>
      <div ref={faqtcRef} className="faqtc">
        <div className="zttl">
          会员常见问题
          <i onClick={closeFaQ} className="close"></i>
        </div>
        <div className="labox">
          <h2>会员常见问题</h2>
          {hyfaq.map((item, index) => {
            return (
              <div key={index}>
                <p className="fold-t">{item.fold}</p>
                <div className="fold-d">
                  {item.content.map((itema, indexa) => {
                    return <p key={itema}>{itema}</p>;
                  })}
                </div>
              </div>
            );
          })}
        </div>
        <div className="ikwon">
          <span onClick={closeFaQ}>我知道了</span>
        </div>
      </div>
    </MemberWrap>
  );
});
